<template>
  <div class="large-screen">
    <mapScene></mapScene>
    <div class="large-screen-wrap" id="large-screen">
      <m-header :title="titleWords">
        <!--右侧 日期 -->
        <template v-slot:right>
          <div class="m-header-date">
            <span>2023-10-12</span><span>17:53:16</span>
          </div></template
        >
      </m-header>
      <div class="sub-title">
        <div class="sub-title-words">{{ provinceName }}</div>
      </div>
      <div class="top-menu">
        <mMenu :default-active="state.activeIndex" @select="handleMenuSelect">
          <mMenuItem index="1">导航栏</mMenuItem>
          <mMenuItem index="2" @click="testEarthquake">导航栏</mMenuItem>
          <mMenuItem index="3">导航栏</mMenuItem>
          <div class="top-menu-mid-space"></div>
          <mMenuItem index="4">导航栏</mMenuItem>
          <mMenuItem index="5">导航栏</mMenuItem>
          <mMenuItem index="6">导航栏</mMenuItem>
        </mMenu>
      </div>
      <!-- 左边布局 图表 -->
      <div class="left-wrap">
        <div class="left-wrap-3d">
          <!-- 大宗商品销售额 -->
          <Frequency></Frequency>
          <!-- 年度经济增长点 -->
          <Time></Time>
          <!-- 近年经济情况 -->
          <Stastic></Stastic>
          <!-- 各区经济收益 -->
        </div>
      </div>
      <!-- 右边布局 图表 -->
      <div class="right-wrap">
        <div class="right-wrap-3d">
          <!-- 专项资金用途 -->
          <Recent> </Recent>
          <!-- 人群消费占比 -->
          <ImportantEvent></ImportantEvent>
          <!-- 用电情况 -->
          <!-- <Province></Province> -->
          <!-- 各季度增长情况 -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import mapScene from "./map-animate/map.vue";
import mHeader from "@/components/mHeader/index.vue";
import Frequency from "./components/Frequency.vue";
import Time from "./components/Time.vue";
import Stastic from "./components/Stastic.vue";

import Recent from "./components/Recent.vue";
import ImportantEvent from "./components/ImportantEvent.vue";
import Province from "./components/Province.vue";
import mMenu from "@/components/mMenu/index.vue";
import mRadar from "@/components/mRadar/index.vue";
import mMenuItem from "@/components/mMenuItem/index.vue";
import autofit from "autofit.js";
import { onMounted, reactive, ref } from "vue";
import emitter from "@/utils/emitter";
import gsap from "gsap";
const state = reactive({
  // 进度
  progress: 0,
  // 当前顶部导航索引
  activeIndex: "1",
});
onMounted(() => {
  emitter.$on("mapPlayComplete", handleMapPlayComplete);
  emitter.$on("getMapDataEnd", getMapDataEnd);
  emitter.$on("loadChildMap", loadChildMap);

  autofit.init({
    dh: 1080,
    dw: 1920,
    el: "#large-screen",
    resize: true,
  });
});
const titleWords = ref("地震数据可视化平台");
const provinceName = ref("");
const loadChildMap = (data) => {
  provinceName.value = data.name;
};

const getMapDataEnd = (data) => {
  provinceName.value = data.features[0].properties.name;
};
const handleMapPlayComplete = () => {
  let tl = gsap.timeline({ paused: false });
  let leftCards = gsap.utils.toArray(".left-card");
  let rightCards = gsap.utils.toArray(".right-card");
  let countCards = gsap.utils.toArray(".count-card");
  tl.addLabel("start", 0.5);
  tl.addLabel("menu", 0.5);
  tl.addLabel("card", 1);
  tl.addLabel("countCard", 3);
  tl.to(
    ".m-header",
    { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" },
    "start"
  );
  tl.to(
    ".sub-title",
    { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" },
    "start"
  );
  tl.to(
    ".bottom-tray",
    { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" },
    "start"
  );
  tl.to(
    ".top-menu",
    {
      y: 0,
      opacity: 1,
      duration: 1.5,
      ease: "power4.out",
    },
    "-=1"
  );
  tl.to(
    ".bottom-radar",
    { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" },
    "-=2"
  );
  tl.to(
    leftCards,
    { x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: "power4.out" },
    "card"
  );
  tl.to(
    rightCards,
    { x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: "power4.out" },
    "card"
  );
  tl.to(
    countCards,
    {
      y: 0,
      opacity: 1,
      stagger: 0.2,
      duration: 1.5,
      ease: "power4.out",
    },
    "card"
  );
};
</script>
<style scoped lang="scss">
@import "@/assets/style/home.scss";
.m-header-weather,
.m-header-date {
  span {
    padding-right: 10px;
    color: #c4f3fe;
    font-size: 14px;
  }
}
.top-menu {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 40px;
  z-index: 3;
  display: flex;
  justify-content: center;
  .top-menu-mid-space {
    width: 800px;
  }
}
.bottom-radar {
  position: absolute;
  right: 500px;
  bottom: 100px;
  z-index: 3;
}
.main-btn-group {
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 999;
  &.disabled {
    pointer-events: none;
  }
  .btn {
    margin-right: 10px;
  }
}
.bottom-svg-line-left,
.bottom-svg-line-right {
  position: absolute;
  right: 50%;
  width: 721px;
  height: 57px;
  margin-right: -5px;
  bottom: -21px;
}
.bottom-svg-line-right {
  transform: scaleX(-1);
  left: 50%;
  right: inherit;
  margin-right: inherit;
  margin-left: -5px;
}
/* 初始化动画开始位置 */
.m-header {
  transform: translateY(-100%);
  opacity: 0;
}
/* 初始化动画开始位置 */
.sub-title {
  transform: translateY(-100%);
  opacity: 0;
}
.top-menu {
  transform: translateY(-250%);
  opacity: 0;
}
.count-card {
  transform: translateY(150%);
  opacity: 0;
}
.left-card {
  transform: translateX(-150%);
  opacity: 0;
}
.right-card {
  transform: translateX(150%);
  opacity: 0;
}
.bottom-tray {
  transform: translateY(100%);
  opacity: 0;
}
.bottom-radar {
  transform: translateY(100%);
  opacity: 0;
}

.sub-title {
  position: relative;
  left: 0;
  top: 20px;
  right: 0;
  width: 100%;
  height: 90px;
  z-index: 2;
  color: #fff;
  display: flex;
  justify-content: center;
  &-words {
    font-size: 44px;
    letter-spacing: 1px;
    background: -webkit-linear-gradient(
      rgba(117, 232, 255, 1),
      rgba(255, 255, 255, 1)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
